<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="list" v-if="conversationList.length > 0">
					<view class="item" v-for="(item,index) in conversationList" @click="goChat(item)">
						<template v-if="item.userProfile">
							<view class="avatar">
								<image :src="item.userProfile.avatar"></image>
							</view>
							<view class="text">
								<view class="header">
									<view class="name">{{ item.userProfile.nick }}</view>
									<view class="date">{{ getDateDiff(item.lastMessage.lastTime)}}</view>
								</view>
								<view class="bottom">
									<view class="sub-text">
										{{ getLastMsgType(item)}}
									</view>
									<view class="icon" v-if="item.unreadCount>0"></view>
								</view>
							</view>
						</template>
						<template v-if="item.groupProfile">
							<view class="avatar">
								<image :src="item.groupProfile.avatar"></image>
							</view>
							<view class="text">
								<view class="header">
									<view class="name">{{ item.groupProfile.name }}</view>
									<view class="date">{{ getDateDiff(item.lastMessage.lastTime)}}</view>
								</view>
								<view class="bottom">
									<view class="sub-text">
										{{ getLastMsgType(item)}}
									</view>
									<view class="icon" v-if="item.unreadCount>0"></view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 	手动添加好友
			<view style="padding: 24rpx;">
				<wd-input v-model="friend" placeholder="用户UID" />
				<wd-button @click="addFriend">添加好友</wd-button>
			</view> -->
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import { useImStore } from '@/store';
	import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
	import TUIUikitEngine, { TUIConversationService, TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine"
	import { getProfileByuuid } from "@/api/index"
	import useRouter from '../../hooks/useRouter';
	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const theme = ref('light');
			const imStore = useImStore()
			const router = useRouter()
			const conversationList = ref([]);

			const getDateDiff = (timestamp) => {
				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}
				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();
				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}
			const onConversationList = (list : any) => {
				conversationList.value = list;
			}
			const onCurrentConversation = (conversation : any) => {
				// imStore.setCurrentConversation(conversation);
			}
			onLoad(() => {
				TUIStore.watch(StoreName.CONV, {
					conversationList: onConversationList,
					currentConversation: onCurrentConversation,
				});
			})

			// 打开 TUIKit 会话列表
			const openConversation = () => {
				uni.navigateTo({
					url: "/TUIKit/components/TUIConversation/index",
				});
			}
			// 打开 TUIKit 联系人
			const openContact = () => {
				uni.navigateTo({
					url: "/TUIKit/components/TUIContact/index",
				});
			}
			const goChat = (item : any) => {
				getProfileByuuid({
					uuid: item.userProfile.userID
				}).then(async res => {
					const friend = await imStore.toFriendChat(res.uuid, res.uid, res.uuid);
					router.push({
						url: "/im/chat/chat",
						params: {
							uuid: item.userProfile.userID
						}
					});
				});
			}
			const getLastMsgType = (item : any) => {
				switch (item.lastMessage.type) {
					case 'TIMTextElem':
						return item.lastMessage.payload.text;
					case 'TIMImageElem':
						return '[图片]';
					case 'TIMVideoFileElem':
						return '[视频]';
					case 'TIMSoundElem':
						return '[语音]';
					case 'TIMCustomElem':
						if (item.lastMessage.payload.data === 'order') {
							return '[订单信息]';
						} else if (item.lastMessage.payload.data === 'voice-call') {
							return '[语音通话]';
						}
						return '[自定义信息]';
					default:
						return '其他';
				}
			}


			const friend = ref("")
			const addFriend = async () => {
				let imFriend = await imStore.addFriend(friend.value);
				getProfileByuuid({
					uuid: friend.value
				}).then(async (res : any) => {
					imFriend = await imStore.toFriendChat(res.uuid, res.uid, res.uuid);
					router.push({
						url: "/im/chat/chat-1",
						params: {
							uuid: friend.value
						}
					});
				});
			}

			return {
				openConversation,
				openContact,
				goChat,
				conversationList,
				theme,
				friend,
				addFriend,
				getDateDiff,
				getLastMsgType,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		.list {
			width: 100%;

			.item {
				background: #FFFFFF;
				border-radius: 14rpx;
				display: flex;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.avatar {
					width: 93rpx;
					height: 93rpx;
					background: #EEEEEE;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 24rpx - 24rpx - 93rpx);

					.header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;

						}

						.date {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							width: 160rpx;
							text-align: right;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.sub-text {
							font-size: 28rpx;
							font-weight: 400;
							color: #999999;
						}

						.icon {
							width: 10rpx;
							height: 10rpx;
							background: #FF0000;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
</style>